<template>
	<view class="container">
		<!-- 角色切换 -->
		<view class="role-switcher">
			<view 
				class="role-option" 
				:class="{active: currentRole === 'owner'}"
				@click="switchRole('owner')">
				<text class="role-icon">👤</text>
				<text class="role-text">宠物主人</text>
			</view>
			<view 
				class="role-option" 
				:class="{active: currentRole === 'provider'}"
				@click="switchRole('provider')">
				<text class="role-icon">💼</text>
				<text class="role-text">喂养师</text>
			</view>
		</view>

		<!-- 欢迎横幅 -->
		<view class="welcome-banner slide-in-down">
			<view class="banner-content">
				<text class="welcome-title">让爱宠得到最好的照顾 🌸</text>
				<text class="welcome-subtitle">专业、安全、贴心的宠物护理服务</text>
			</view>
			<view class="banner-decoration">
				<text class="decoration-icon floating">🐾</text>
				<text class="decoration-heart heartbeat">💕</text>
			</view>
			<view class="banner-sparkles">
				<text class="sparkle sparkle-1 twinkle">✨</text>
				<text class="sparkle sparkle-2 twinkle">⭐</text>
				<text class="sparkle sparkle-3 twinkle">💫</text>
			</view>
		</view>

		<!-- 核心功能入口 -->
		<view class="main-actions">
			<!-- 宠物主人视角 -->
			<template v-if="currentRole === 'owner'">
				<view class="action-card owner-card bounce-in" @click="goToPublish">
					<view class="card-background">
						<view class="card-icon-wrapper">
							<text class="card-icon">🐾</text>
						</view>
						<view class="card-content">
							<text class="card-title">发布需求</text>
							<text class="card-desc">为毛孩子找到温暖陪伴</text>
						</view>
						<view class="card-arrow">→</view>
					</view>
				</view>

				<view class="action-card owner-card bounce-in delay-100" @click="goToPets">
					<view class="card-background">
						<view class="card-icon-wrapper">
							<text class="card-icon">📝</text>
						</view>
						<view class="card-content">
							<text class="card-title">宠物档案</text>
							<text class="card-desc">管理我的宠物信息</text>
						</view>
						<view class="card-arrow">→</view>
					</view>
				</view>
			</template>

			<!-- 喂养师视角 -->
			<template v-else>
				<view class="action-card provider-card bounce-in" @click="goToOrders">
					<view class="card-background">
						<view class="card-icon-wrapper">
							<text class="card-icon">💖</text>
						</view>
						<view class="card-content">
							<text class="card-title">爱心接单</text>
							<text class="card-desc">附近有 {{nearbyOrders}} 个小可爱等你</text>
						</view>
						<view class="card-arrow">→</view>
					</view>
				</view>

				<view class="action-card provider-card bounce-in delay-100" @click="goToCertification">
					<view class="card-background">
						<view class="card-icon-wrapper">
							<text class="card-icon">✨</text>
						</view>
						<view class="card-content">
							<text class="card-title">完善资料</text>
							<text class="card-desc">提升接单率，获得更多机会</text>
						</view>
						<view class="card-arrow">→</view>
					</view>
				</view>
			</template>
		</view>

		<!-- 推荐服务者 -->
		<view class="section slide-in-up delay-200">
			<view class="section-header">
				<text class="section-title">优质服务者</text>
				<text class="section-more">查看更多</text>
			</view>
			<scroll-view class="providers-scroll" scroll-x="true">
				<view class="provider-card" v-for="provider in providers" :key="provider.id">
					<image class="provider-avatar" :src="provider.avatar"></image>
					<view class="provider-info">
						<text class="provider-name">{{provider.name}}</text>
						<view class="provider-rating">
							<text class="rating-stars">⭐⭐⭐⭐⭐</text>
							<text class="rating-score">{{provider.rating}}</text>
						</view>
						<text class="provider-experience">{{provider.experience}}</text>
						<text class="provider-distance">距离 {{provider.distance}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 紧急需求 -->
		<view class="section slide-in-up delay-300">
			<view class="section-header">
				<text class="section-title">紧急需求</text>
				<text class="section-more">查看全部</text>
			</view>
			<view class="urgent-orders">
				<view class="urgent-order" v-for="order in urgentOrders" :key="order.id">
					<view class="order-header">
						<view class="pet-type">{{order.petType}}</view>
						<view class="urgent-tag">紧急</view>
					</view>
					<text class="order-title">{{order.title}}</text>
					<view class="order-details">
						<text class="order-time">{{order.time}}</text>
						<text class="order-location">{{order.location}}</text>
						<text class="order-price">¥{{order.price}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 信任背书 -->
		<view class="trust-section slide-in-up delay-500">
			<view class="trust-item">
				<text class="trust-icon">🌟</text>
				<text class="trust-text">已认证 {{certifiedProviders}} 名爱心服务者</text>
			</view>
			<view class="trust-item">
				<text class="trust-icon">🛡️</text>
				<text class="trust-text">安心保障服务</text>
			</view>
			<view class="trust-item">
				<text class="trust-icon">🌈</text>
				<text class="trust-text">24小时贴心支持</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentRole: 'owner', // owner: 宠物主人, provider: 喂养师
				nearbyOrders: 12,
				certifiedProviders: 156,
				providers: [
					{
						id: 1,
						name: '小王',
						avatar: '/static/avatar1.png',
						rating: 4.9,
						experience: '养宠5年经验',
						distance: '500m'
					},
					{
						id: 2,
						name: '李阿姨',
						avatar: '/static/avatar2.png',
						rating: 4.8,
						experience: '专业宠物护理',
						distance: '800m'
					}
				],
				urgentOrders: [
					{
						id: 1,
						petType: '🐱',
						title: '今日需要喂食和清理猫砂',
						time: '今天 18:00',
						location: '朝阳区',
						price: 50
					},
					{
						id: 2,
						petType: '🐕',
						title: '需要遛狗和喂食',
						time: '明天 08:00',
						location: '海淀区',
						price: 80
					}
				]
			}
		},
		onLoad() {
			// 从本地存储加载用户角色
			const userRole = uni.getStorageSync('userRole')
			if (userRole) {
				this.currentRole = userRole
			}
		},
		methods: {
			// 切换角色
			switchRole(role) {
				this.currentRole = role
				uni.setStorageSync('userRole', role)
			},
			
			goToPublish() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			goToOrders() {
				uni.switchTab({
					url: '/pages/orders/orders'
				})
			},
			goToPets() {
				uni.navigateTo({
					url: '/pages/pets/pets'
				})
			},
			goToCertification() {
				uni.navigateTo({
					url: '/pages/certification/certification'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 50%, #FFF0F5 100%);
		padding: 20rpx;
	}

	/* 角色切换 */
	.role-switcher {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 10rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.role-option {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		padding: 20rpx;
		border-radius: 18rpx;
		transition: all 0.3s ease;
		background: transparent;
	}

	.role-option.active {
		background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
		box-shadow: 0 4rpx 12rpx rgba(255, 182, 193, 0.3);
	}

	.role-icon {
		font-size: 32rpx;
	}

	.role-text {
		font-size: 26rpx;
		font-weight: 600;
		color: #666666;
	}

	.role-option.active .role-text {
		color: #FFFFFF;
	}

	

	/* 核心功能入口 */
	.main-actions {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.action-card {
		border-radius: 30rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(255, 182, 193, 0.15);
		transition: all 0.3s ease;
		background: white;
	}

	.provider-card {
		box-shadow: 0 8rpx 32rpx rgba(152, 228, 214, 0.15);
	}

	.action-card:active {
		transform: scale(0.98);
	}
	
	.action-card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.25);
	}

	.action-card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.2);
	}

	.card-background {
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		min-height: 120rpx;
		border-radius: var(--radius-large);
	}

	.owner-card .card-background {
		background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	}

	.owner-card .card-icon {
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.provider-card .card-background {
		background: linear-gradient(135deg, #98E4D6 0%, #7FCDCD 100%);
	}

	.provider-card .card-icon {
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.card-icon-wrapper {
		width: 90rpx;
		height: 90rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: var(--radius-medium);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.card-icon {
		font-size: 45rpx;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
	}

	.card-title {
		font-size: 34rpx;
		font-weight: 700;
		color: #FFFFFF;
		display: block;
		margin-bottom: 12rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		line-height: 1.4;
		letter-spacing: 1rpx;
	}

	.card-desc {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.95);
		line-height: 1.5;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
		font-weight: 400;
		letter-spacing: 0.5rpx;
		word-wrap: break-word;
	}

	.card-arrow {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: bold;
		margin-left: 20rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45rpx;
		height: 45rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}

	/* 通用区块样式 */
	.section {
		margin: 40rpx 0;
		padding: 0;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: var(--text-primary);
		letter-spacing: 1rpx;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}

	.section-more {
		font-size: 26rpx;
		color: var(--orange-accent);
		font-weight: 500;
	}

	/* 推荐服务者 */
	.providers-scroll {
		white-space: nowrap;
	}

	.provider-card {
		display: inline-block;
		background: white;
		border-radius: var(--radius-large);
		padding: 30rpx;
		margin-right: 20rpx;
		box-shadow: var(--shadow-medium);
		transition: all 0.3s ease;
	}
	.provider-card-hover{
		padding: 0;
	}
	
	/* 悬浮效果 */
	.provider-card, .urgent-order, .action-card {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.provider-card:hover, .urgent-order:hover, .action-card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.2);
	}

	.provider-card:active {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.provider-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
		border: 4rpx solid var(--primary-light);
		box-shadow: var(--shadow-medium);
	}

	.provider-name {
		font-size: 30rpx;
		font-weight: bold;
		color: var(--text-primary);
		display: block;
		margin-bottom: 10rpx;
	}

	.provider-rating {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.rating-stars {
		font-size: 20rpx;
		margin-right: 10rpx;
		color: #FFD700;
	}

	.rating-score {
		font-size: 26rpx;
		color: var(--orange-accent);
		font-weight: bold;
	}

	.provider-experience,
	.provider-distance {
		font-size: 22rpx;
		color: var(--text-secondary);
		display: block;
		margin-bottom: 5rpx;
	}

	/* 紧急需求 */
	.urgent-orders {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.urgent-order {
		background: white;
		border-radius: var(--radius-large);
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: var(--shadow-medium);
		border-left: 6rpx solid var(--urgent-red);
		transition: all 0.3s ease;
	}

	.urgent-order:active {
		transform: translateY(-1rpx);
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.pet-type {
		font-size: 32rpx;
	}

	.urgent-tag {
		background: var(--urgent-red);
		color: white;
		font-size: 20rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-weight: 500;
		box-shadow: var(--shadow-light);
	}

	.order-title {
		font-size: 28rpx;
		color: var(--text-primary);
		display: block;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.order-details {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-time,
	.order-location {
		font-size: 24rpx;
		color: var(--text-secondary);
	}

	.order-price {
		font-size: 30rpx;
		color: var(--orange-accent);
		font-weight: bold;
	}

	/* 信任背书 */
	.trust-section {
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 245, 0.9) 100%);
		margin: 30rpx;
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-heavy);
		border: 2rpx solid rgba(255, 182, 193, 0.2);
		transition: all 0.3s ease;
	}
	
	.trust-section:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.2);
	}

	.trust-item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		padding: 15rpx;
		border-radius: var(--radius-medium);
		transition: all 0.3s ease;
	}
	
	.trust-item:hover {
		background: rgba(255, 255, 255, 0.5);
		transform: translateX(5rpx);
	}

	.trust-item:last-child {
		margin-bottom: 0;
	}

	.trust-icon {
		font-size: 32rpx;
		margin-right: 20rpx;
		filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	/* 欢迎横幅样式 */
	.welcome-banner {
		background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
		margin-bottom: 30rpx;
		border-radius: var(--radius-xl);
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: var(--shadow-heavy);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	
	.welcome-banner:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.3);
	}

	.welcome-banner::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -20%;
		width: 200rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
	}

	.banner-content {
		flex: 1;
	}

	.welcome-title {
		font-size: 36rpx;
		font-weight: bold;
		color: var(--title-text-color);
		display: block;
		margin-bottom: 12rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.welcome-subtitle {
		font-size: 26rpx;
		color: #A0522D;
		display: block;
		font-weight: 500;
	}

	.banner-decoration {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15rpx;
	}

	.decoration-icon {
		font-size: 60rpx;
		opacity: 0.9;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.decoration-heart {
		font-size: 40rpx;
		opacity: 0.8;
		animation: heartbeat 2s ease-in-out infinite;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.floating {
		animation: floating 3s ease-in-out infinite;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}

	.banner-sparkles {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 0;
	}

	.sparkle {
		position: absolute;
		font-size: 24rpx;
		opacity: 0.7;
		filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.sparkle-1 {
		top: 20%;
		left: 15%;
		animation: twinkle 2s ease-in-out infinite;
		filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.sparkle-2 {
		top: 60%;
		right: 20%;
		animation: twinkle 2.5s ease-in-out infinite 0.5s;
		filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.sparkle-3 {
		bottom: 30%;
		left: 20%;
		animation: twinkle 3s ease-in-out infinite 1s;
		filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	@keyframes floating {
		0%, 100% { transform: translateY(0px); }
		50% { transform: translateY(-10rpx); }
	}

	@keyframes heartbeat {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.1); }
	}

	@keyframes twinkle {
		0%, 100% { opacity: 0.3; transform: scale(1); }
		50% { opacity: 1; transform: scale(1.2); }
	}

	.trust-text {
		font-size: 26rpx;
		color: var(--text-secondary);
	}

	.banner-promotion {
		background: rgba(255, 255, 255, 0.9);
		border-radius: var(--radius-large);
		padding: 12rpx 20rpx;
		align-self: flex-start;
		border: 2rpx solid rgba(139, 69, 19, 0.2);
		box-shadow: var(--shadow-light);
	}

	.promotion-text {
		font-size: 24rpx;
		color: var(--title-text-color);
		font-weight: 500;
	}
</style>
